<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 
            流：
            普通流、
            浮动流(float)：(没有脱离文本流)包裹性、块状化、向上性
            定位流(position):完全脱离普通流
        */
        /* 重置样式 */
        *{padding: 0;margin: 0;}
        li{list-style: none;}
        a{text-decoration: none;}
        /* 伪元素 ::after  ::before */
        .clear::after{
            content: '';
            display: block;
            clear: both;
        }

        .box{
            position: relative;
            width: 600px;
            height: 300px;
            overflow: hidden;
            margin: 30px auto;
            border: 3px solid #f00;
        }
        .box .nav{
            position: absolute;
            left: 50%;
            margin-left: -16px;
            bottom: 30px;
        }
        .arrow{
            position: absolute;
            top: 100px;
            width: 60px;
            height: 50px;
            display: block;
            background-color: #999;
            color: #fff;
            line-height: 50px;
            
        }
        .arrow-left{
            left: -25px;
            border-radius: 25px;
            text-indent: 30px;
        }
        .arrow-right{
            right: -25px;
            text-indent: 10px;
        }

        .header-wrap{
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 999;
            background-color: rgba(0,0,0,0.6);
        }
        .header{
            width: 1200px;
            margin: 0 auto;
            /* background-color: #ccc; */
        }
        .logo{float: left;}
        .search-box{
            float: left;
            width: 500px;
            height: 40px;
            margin-top: 8px;
            margin-left: 200px;
            border-radius: 20px;
            border: 2px solid #f00;
        }
        .search-box select{
            width: 100px;
            height: 40px;
        }
        .search-box input{
            width: 330px;
            height: 40px;
            border: none;
            outline: none;
        }
        .search-box button{
            width: 60px;
            height: 30px;
            border: none;
            border-radius: 15px;
            color: #fff;
            font-size: 18px;
            background-color: #ff5000;
            cursor: pointer;
        }
        /* https://gitee.com/hlchampion/web-2022 */
    </style>
</head>
<body>
    <div class="header-wrap">
        <div class="header clear">
            <img class="logo" src="https://gw.alicdn.com/imgextra/i3/O1CN01uRz3de23mzWofmPYX_!!6000000007299-2-tps-143-59.png" alt="">
            <div class="search-box">
                <select name="" id="">
                    <option value="">天猫</option>
                    <option value="">店铺</option>
                    <option value="">淘宝</option>
                </select>
                <input type="text">
                <button>搜索</button>
            </div>
        </div>
    </div>
    <div class="box">
        <span class="arrow arrow-left"><</span>
        <span class="arrow arrow-right">></span>
        <span class="nav">hello</span>
    </div>
    <div class="box">
        <span class="arrow arrow-left"><</span>
        <span class="arrow arrow-right">></span>
        <span class="nav">hello</span>
    </div>
    <div class="box">
        <span class="arrow arrow-left"><</span>
        <span class="arrow arrow-right">></span>
        <span class="nav">hello</span>
    </div>
    <div class="box">
        <span class="arrow arrow-left"><</span>
        <span class="arrow arrow-right">></span>
        <span class="nav">hello</span>
    </div>
    <div class="box">
        <span class="arrow arrow-left"><</span>
        <span class="arrow arrow-right">></span>
        <span class="nav">hello</span>
    </div>
    <div class="box">
        <span class="arrow arrow-left"><</span>
        <span class="arrow arrow-right">></span>
        <span class="nav">hello</span>
    </div>
    <div class="box">
        <span class="arrow arrow-left"><</span>
        <span class="arrow arrow-right">></span>
        <span class="nav">hello</span>
    </div>
</body>
</html>

